<template>
<div>
  <div class="header">
    <div class="header_left">
      <img src="@/assets/logo.png" alt="logo" />
      <div>
        <div
          v-for="(item, index) in menu.list"
          :class="active === index ? 'active' : ''"
          :key="index"
          @click="toPath(item, index)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="header_right">
      <div class="header_right_lang">
        <div
          :class="lang.show ? 'header_right_btn active' : 'header_right_btn'"
          @click="lang.show = !lang.show"
        >
          <img :src="lang.active.icon" :alt="lang.active.value" />
          <span>{{ lang.active.name }}</span>
          <i class="el-icon-arrow-up" v-if="lang.show"></i>
          <i class="el-icon-arrow-down" v-else></i>
        </div>
        <div class="header_right_langList" v-show="lang.show">
          <div
            :class="
              lang.active.value === item.value
                ? 'header_right_btn active'
                : 'header_right_btn'
            "
            v-for="item in lang.list"
            :key="item.value"
            @click="langClick(item)"
          >
            <img :src="item.icon" :alt="item.value" />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
      <i
        class="el-icon-question"
        style="color: #ffffff; cursor: pointer; margin-left: 10px"
      >
    </i>
      <div class="header_right_info">
                <img src="@/assets/headerNav/header.png" alt="" @click="user.listShow = !user.listShow" v-if="user.show" />
                <div class="header_right_login" v-else>
<!--           <span  @click="toPath('/user/login')">登录</span>
                  <span @click="toPath('/user/register')">注册</span> -->
                  <router-link class="link_item" to="/user/login" style="color: #ffffff;padding-left: 10px;padding-right: 10px;">登录</router-link>
                  <router-link class="link_item " to="/user/register" style="color: #ffffff;">注册</router-link>
                </div>
        <div class="header_right_infoList" v-show="user.listShow">
          <div v-for="(item, index) in user.list" :key="index" @click="onCopyClick(item)">
            <img :src="item.img" :alt="item.name" />
            <span>{{ item.name }}</span>
          </div>
        </div>

    <!--  <el-dialog
      title="修改密码"
      :visible.sync="showDialog"
      width="40%" @close="resetForm" custom-class="custom-dialog">
      <div>
        <el-divider></el-divider>
      </div>
    <div>
      <el-form  :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item class="is-required" label="旧密码" prop="age" >
          <el-input v-model.number="ruleForm.age" placeholder="请输入旧密码"></el-input>
        </el-form-item>
        <el-form-item class="is-required" label="新密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" placeholder="请输入新密码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item  class="is-required" label="确认新密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" placeholder="请确认新密码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false" size="mini">关闭</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')" size="mini">确认</el-button>
        </el-form-item>
      </el-form>
    </div>
        </el-dialog> -->
      </div>
    </div>
  </div>
  <!-- <edit-account v-if="dialogVisible"></edit-account> -->

  <el-dialog :visible.sync="showDialog" :width="'600px'" style="text-align: left;" title="修改密码" @close="resetForm" custom-class="custom-dialog">
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item label="旧密码" prop="oldPassword" :label-width="'100px'" style="display: inline-block;" :rules="[{ required: true, message: '请输入旧密码', trigger: 'blur' }]">
        <el-input v-model="form.oldPassword" type="password" style="width: 400px;"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword" :label-width="'100px'" style="display: inline-block;" :rules="[{ required: true, message: '请输入新密码', trigger: 'blur' }]">
        <el-input v-model="form.newPassword" type="password" style="width: 400px;"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword" :label-width="'100px'" style="display: inline-block;" :rules="[{ required: true, message: '请确认密码', trigger: 'blur' }]">
        <el-input v-model="form.confirmPassword" type="password" style="width: 400px;"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="showDialog = false">取消</el-button>
      <el-button type="primary" @click="confirmPasswordChange">确认</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
//import editAccount from '@/views/login/EditAccount'
//import { ElDialog, ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'
import { editorApi , getUserApi } from '@/api/index'
import { Dialog, Form, FormItem, Input, Button } from 'element-ui'
export default {
  name: 'HeaderNav',
  components: {
    'el-dialog': Dialog,
    'el-form': Form,
    'el-form-item': FormItem,
    'el-input': Input,
    'el-button': Button,
  },
  data () {
    return {

      showDialog: false,
      userInfo:{},
      form: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      rules: {
        oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
        newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
        confirmPassword: [{ required: true, message: '请确认密码', trigger: 'blur' }]
      },
      //dialogVisible: false,
      active: 0,
      menu: {
        list: [
          {
            name: '首页',
            path: '/'
          },
          {
            name: '信号源',
            path: 'SignalView'
          },
          {
            name: '合作平台',
            path: 'CooperationView'
          },
          {
            name: '行情工具',
            path: 'market'
          },
          {
            name: '帮助中心',
            path: 'help'
          },
          {
            name: '关于我们',
            path: 'regard'
          }
        ]
      },
      lang: {
        show: false,
        active: {
          icon: require('@/assets/headerNav/zh-cn.png'),
          name: '简体中文',
          value: 'zh-cn'
        },
        list: [
          {
            icon: require('@/assets/headerNav/zh-cn.png'),
            name: '简体中文',
            value: 'zh-cn'
          },
          {
            icon: require('@/assets/headerNav/ft.png'),
            name: '繁体中文',
            value: 'ft'
          },
          {
            icon: require('@/assets/headerNav/en.png'),
            name: 'English',
            value: 'en'
          }
        ]
      },
      user: {
        show: !!localStorage.getItem('token'),
        listShow: false,
        list: [
         /*  {
            img: require('@/assets/headerNav/my.png'),
            name: '我的账户',
            path: ''
          }, 
          {
            img: require('@/assets/headerNav/add.png'),
            name: '添加账户',
            path: ''
          },*/
          {
            img: require('@/assets/headerNav/wallet.png'),
            name: '推广返佣',
            path: '/commission'
          },
          {
            img: require('@/assets/headerNav/key.png'),
            name: '密码修改',
            path: ''
          },
          {
            img: require('@/assets/headerNav/return.png'),
            name: '退出登录',
            path: '/user/login'
          }
        ]
      }
    }
  },
  components: {
    //editAccount
  },
  mounted(){
    //this.getUser()
  },
  methods: {
    toPath (item, index) {
      this.$router.push(item.path)
      this.active = index
    },
    langClick (item) {
      this.lang.active = item
      this.lang.show = false
    },
    onPathClick (path) {
      if (path === '') {
        this.$router.push('#')
      }
      this.$router.push(path)
    },
    /*     tpLogin () {
      this.$router.push('login')
    },
    toRegister () {
      this.$router.push('register')
    }, */
     onCopyClick (item) {
      if (item.path === '') {
        this.$router.push('#')
      }
      this.$router.push(item.path)
      if (item.name === '密码修改') {
        this.showDialog = true
      }
      /* if (item.name === '我的账户') {
       const user_id=this.userInfo.user.id
       this.$router.push({
         path: `/userInfo`,
         query:{user_id:user_id}
        });
      } */
    },


   /*  getUser(){
    const token = localStorage.getItem('token');
      let data={
        token:token,
      }
          getUserApi(data).then(res=>{
            this.userInfo=res.data.data
            console.log(this.userInfo)
          })
    }, */

    resetForm() {
      this.form.oldPassword = '';
      this.form.newPassword = '';
      this.form.confirmPassword = '';
    },

    confirmPasswordChange() {
      if (!this.form.oldPassword) {
        this.$message({ message: '请输入旧密码', type: 'error' })
      }
      if (!this.form.newPassword) {
          this.$message({ message: '请输入新密码', type: 'error' })       
      }
      if(this.form.newPassword !== this.form.confirmPassword){
        this.$message({message:'两次密码输入的不一致，请重新输入',type:'error'})
      }
      const token = localStorage.getItem('token');
      let data={
        old_password:this.form.oldPassword,
        password:this.form.newPassword,
        confirm_password:this.form.confirmPassword,
        token:token,
      }
      editorApi(data).then(res=>{
        console.log(res.data,'修改密码>>>>>>')
        this.$message.success(res.data.msg)
      }).catch(error => {
      console.error(error);
      this.$message.error('修改密码失败');
    });
      // 修改密码后，关闭对话框
      this.showDialog = false;
      // 清空表单
      this.resetForm();
    }
  }
}
</script>

<style scoped lang="scss">
.custom-dialog {
  background-color: #fff; /* 设置对话框背景颜色为白色 */

}

.header {
  width: 100vw;
  height: 55px;
  position: fixed;
  top: 0;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #002748;
}
.header_left {
  display: flex;
  align-items: center;
  & > img {
    width: 120px;
    height: 42px;
    margin: 0 0 0 20px;
    border-radius: 8px;
  }
  & > div {
    width: 30vw;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    & > div {
      height: 1.15vw;
      font-size: 14px;
      text-align: left;
      white-space: nowrap;
      cursor: pointer;
      color: #ffffff;
    }
  }
}
.header_right {
  display: flex;
  align-items: center;
  margin-right: 20px;
  .header_right_lang {
    position: relative;
    .header_right_btn {
      width: 100px;
      height: 32px;
      color: #fff;
      font-size: 0.83vw;
      text-align: left;
      white-space: nowrap;
      line-height: 1.15vw;
      display: flex;
      align-items: center;
      justify-content: space-around;
      cursor: pointer;
      & > img {
        width: 15px;
        height: 15px;
        margin-bottom: 1px;
      }
    }
    & > .active {
      border: 2px solid rgba($color: #04d1b3, $alpha: 0.5);
      border-radius: 4px;
    }
    .header_right_langList {
      position: absolute;
      background-color: #ffffff;
      border-radius: 4px;
      padding: 2px 0;
      .header_right_btn {
        color: #0c0c0c;
        padding: 0 12px;
        box-sizing: border-box;
        justify-content: flex-start;
        & > img {
          width: 15px;
          height: 15px;
          margin-right: 3px;
        }
        & > span {
          font-size: 13px;
        }
      }
      .active {
        background-color: rgba($color: #04d1b3, $alpha: 0.1);
        & > img {
          width: 17px;
          height: 17px;
          margin-right: 3px;
        }
        & > span {
          font-weight: 600;
        }
      }
    }
  }
  .header_right_info {
    position: relative;
    .header_right_login {
      & > span {
        color: rgb(255, 255, 255);
        cursor: pointer;
        margin: 0px 0px 0px 1.26vw;
        font-size: 14px;
      }
    }
    & > img {
      width: 1.98vw;
      height: 1.98vw;
      margin: 0 2.18vw 0 30px;
      border-radius: 50%;
      cursor: pointer;
    }
    .header_right_infoList {
      font-size: 18px;
      box-sizing: border-box;
      position: absolute;
      top: 45px;
      right: -10px;
      background-color: #ffffff;
      padding: 4px 0;
      border-radius: 4px;
      & > div {
        width: 140px;
        height: 32px;
        font-size: 0.83vw;
        display: flex;
        align-items: center;
        justify-content: center;
        & > img {
          width: 18px;
          height: 18px;
          margin-right: 5px;
        }
        & > span {
          color: #707070;
          font-size: 16px;
        }
      }
    }
  }
}
.user {
  margin: 0 10px;
}
.active {
  color: #e74242 !important;
}
</style>
